<template>
    <table class="table">
        <thead>
        <tr>
            <th>序号</th>
            <th :key="i" :style="{width:x.width+'%'}" v-for="(x,i) in head">{{x.name}}</th>
        </tr>
        </thead>
        <tbody :style="{height: rollH}">
			<tr v-for="(item,index) in list" :key="index">
				<td>{{index+1}}</td>
				<td>{{item.name}}</td>
				<td>{{item.address}}</td>
				<td>{{item.depth}}</td>
				<td>{{item.level}}</td>
				<td>{{item.uptime}}</td>
			</tr> 
<!--        <tr :key="k || i" v-for="(x,i) in list">
            <td>{{i+1}}</td>
            <td :style="{width:y.width+'%'}" v-for="y in head">{{x[y.key]}}</td>
        </tr> -->
        </tbody>
    </table>
</template>

<script type="text/ecmascript-6">
    export default {
        props:['head','list','k', 'rollH'],
        data () {
            return {}
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    table.table{
        font-size: 10px*@ratio;
        width: 100%;
        *::-webkit-scrollbar{
            width: 0;height: 0;
        }
        tbody {
            display: block;
            overflow-y: auto;
        }
        thead{
            background:linear-gradient(to bottom,transparent, #0b5a86);
        }
        thead,tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            text-align: center;
        }
        th,td{
            font-weight: normal;
            height: 24px*@ratio;
            color: rgba(255,255,255,.6);
            vertical-align: middle;
            overflow: hidden;
            word-break: break-all;
            &:first-child{
                width: 35px*@ratio;
            }
        }
    }
</style>
